<script setup>
defineProps({
  label: String,
})
</script>

<template>
  <media-radio
    class="ring-media-focus group relative flex w-full cursor-pointer select-none items-center justify-start rounded-sm p-2.5 outline-none data-[hocus]:bg-white/10 data-[focus]:ring-[3px]"
  >
    <media-icon
      class="h-4 w-4 text-white group-data-[checked]:hidden"
      type="radio-button"
    />
    <media-icon
      class="text-media-brand hidden h-4 w-4 group-data-[checked]:block"
      type="radio-button-selected"
    />
    <span class="ml-2" data-part="label">{{ label }}</span>
  </media-radio>
</template>
